<template>
  <view class="consultation-index">
    <up-list @scrolltolower="scrolltolower" height="100vh">
      <template v-if="list.length">
        <up-list-item v-for="(item, index) in list" :key="index">
          <view class="text-[29rpx] bg-white py-4.5 px-5 box-border">
            <view class="flex mb-3.5">
              <text class="label text-[#8A8A8A] whitespace-nowrap"
                >上报内容：</text
              >
              <text class="text-black">{{ item.content }}</text>
            </view>
            <view class="mb-3.5 flex" v-if="item.imgUrl && item.imgUrl.length">
              <text class="text-[#8A8A8A] whitespace-nowrap"
                >图&emsp;&emsp;片：</text
              >
              <view class="flex flex-wrap">
                <up-album
                  :urls="item.imgUrl"
                  space="20rpx"
                  singleSize="155rpx"
                  multipleSize="155rpx"
                  autoWrap
                  :maxCount="3"
                  unit="rpx"
                ></up-album>
              </view>
            </view>
            <view class="flex mb-3.5">
              <text class="label color-[#8A8A8A] whitespace-nowrap"
                >上报人员：</text
              >

              <view class="flex flex-row items-center">
                <text class="text-black">{{ item.consultUserName }}</text>
                <text
                  class="text-black ml-2"
                  @click="callPhone(item.phonenumber)"
                  >{{ item.phonenumber }}</text
                >
              </view>
            </view>
            <view class="flex mb-3.5">
              <text class="label text-[#8A8A8A] whitespace-nowrap"
                >人员地址：</text
              >
              <text class="text-black">{{ item.address }}</text>
            </view>
            <view class="flex mb-3.5">
              <text class="label color-[#8A8A8A] whitespace-nowrap"
                >上报时间：</text
              >
              <text class="text-black">{{
                item.createTime
                  ? dayjs(item.createTime).format("YYYY-MM-DD hh:mm:ss")
                  : ""
              }}</text>
            </view>
            <view class="flex items-center">
              <text class="text-[#8A8A8A] whitespace-nowrap">是否处理：</text>
              <view
                class="text-[#000000] flex items-center"
                v-if="item.handleStatus === 0"
                >未处理
                <button
                  class="btn-038AFE text-[32rpx] h-[49rpx] leading-[49rpx] ml-5"
                  @click="updateStatus(item.id, 1)"
                >
                  办结
                </button>
              </view>
              <template v-else>
                <view
                  class="text-white bg-[#67c23a] rounded-1 text-[32rpx] py-[5rpx] px-2.5 box-border"
                  v-if="item.handleStatus == 1"
                  >已办结</view
                >
              </template>
            </view>
          </view>
          <up-gap height="10" v-if="index + 1 != list.length"></up-gap>
        </up-list-item>
      </template>
      <up-empty
        v-else
        mode="data"
        text="暂无记录"
        icon="http://cdn.uviewui.com/uview/empty/data.png"
      >
      </up-empty>
    </up-list>
    <up-toast ref="uToastRef"></up-toast>
  </view>
</template>
<script setup lang="ts">
import { listPagePolice, updateHandleStatus } from "@/api/consultation/index";
import dayjs from "dayjs";
import { imgPrefix } from "@/config/app";
import { callPhone } from "@/utils/tools";
import { useUserInfoStore } from "@/stores/userInfo";
const userInfoStore = useUserInfoStore();

const uToastRef = <any>ref(null);
const data = reactive({
  queryParam: {
    pageNum: 1,
    pageSize: 10,
    policeUserId: userInfoStore.userInfo.userId,
  },
  list: <any>[],
  total: 0,
});
const { queryParam, list, total } = toRefs(data);

const getConsultationList = () => {
  uni.showLoading({
    title: "加载中",
    mask: true,
  });
  listPagePolice(queryParam.value)
    .then((res) => {
      uni.hideLoading();
      const { data } = res;
      data.records = data.records ?? [];
      data.records = processImg(data.records);
      list.value = [...list.value, ...data.records];
      total.value = data.total;
    })
    .catch((err) => {
      uni.hideLoading();
      uToastRef.value.show({
        type: "error",
        message: err,
      });
    });
};

// 数据处理-图片
const processImg = (arr: Array<any>) => {
  if (arr.length) {
    arr = arr.map((item: any) => {
      if (item.imgUrl) {
        item.imgUrl = item.imgUrl.split(",");
        if (item.imgUrl.length) {
          item.imgUrl = item.imgUrl.map((img: any) => {
            img = imgPrefix + img;
            return img;
          });
        }
      }
      return item;
    });
  }
  return arr;
};

// 状态变更
const updateStatus = (id: any, handleStatus: any) => {
  updateHandleStatus({
    handleStatus,
    id,
  })
    .then((res: any) => {
      uToastRef.value.show({
        type: "success",
        message: "状态设置成功",
      });
      queryParam.value.pageNum = 1;
      list.value = [];
      total.value = 0;
      getConsultationList();
    })
    .catch((err: any) => {
      uToastRef.value.show({
        type: "error",
        message: err,
      });
    });
};

onLoad(() => {
  getConsultationList();
});

const scrolltolower = () => {
  let allTotal = queryParam.value.pageNum * queryParam.value.pageSize;
  if (allTotal >= total.value) {
    return;
  }
  queryParam.value.pageNum = ++queryParam.value.pageNum;
  getConsultationList();
};
</script>
<style lang="scss" scoped>
.consultation-index {
  ::v-deep .u-album__row__wrapper > image {
    width: 155rpx !important;
    height: 104rpx !important;
  }
}
</style>
